{extend name="public/common"}

{block name="style"}
<title>订单详情</title>
<style>
    body{
        background-color: #F0F0F0;
    }
    .mint-tab-item-label { font-size: 1.4rem;  }
    .mint-navbar .mint-tab-item.is-selected {color: #69B9F9;opacity: .9;margin-bottom: 0}
    /*.mint-tab-item:active {*/
    /*background: red;*/
    /*}*/
    .tab-item-sort>.tab-item-time {padding: 0 4vw;height:7.2vw;line-height: 7.2vw;color: #929292;font-size: 1.2rem;}
    .tab-sort-num {background: #fff;width:96vw;padding: 4.53vw 0 4.53vw 4vw;margin-bottom: 2.67vw;}
    .tab-sort-Img {width:21.33vw;height:21.33vw;float:left;}
    .tab-sort-detail {margin-left: 24.53vw;height:21.4vw;position: relative;padding-right: 4vw;font-size: 1.2rem;}
    .tab-sort-title {
        color: #333;
        font-size: 1.6rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        min-height: 11.733vw;
        font-weight: 900;
    }
    .tab-sort-time {font-size: 1.2rem;color: #999;}
    .tab-sort-day {margin-top: 1.5vw;font-size: 1.2rem;}
    .tab-sort-day span {padding: 1px;}
    .tab-sort-day span:first-child {
        border-top: 1px solid #69B9F9;
        border-left: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        background: #69B9F9;
        color: #fff;
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
    }
    .tab-sort-day span:last-child {
        border-top: 1px solid #69B9F9;
        border-right: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        color: #69B9F9;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .tab-sort-money {
        position: absolute;
        bottom:-.7vw;
        right:4vw;
        font-size: 1.6rem;
        color: #52CC92;
    }
    .tab-sort-bottom {
        margin-left: 24.53vw;
        border-top: 1px solid #E8E8E8;
        margin-top: 3.14vw;
        padding-top: 2.14vw;
        font-size: 1.2rem;
    }
    .tab-sort-bottom .active {font-size: 1.1rem;color: #333;}
    .tab-sort-bottom .active img {
        width:4.27vw;
        height:4.27vw;
        background: #FCC44B;
        border-radius: 2px;
        color: #fff;
    }
    .tab-sort-bottom .cancel {font-size: 1.1rem;color: #999;}
    .tab-sort-bottom .cancel img {
        width:4.27vw;
        height:4.27vw;
        background: #E5E5E5;
        border-radius: 2px;
        color: #fff;
    }
    .detail-people {background: #fff;padding:4vw;margin-bottom: 2.67vw;}
    .people_sort {margin-bottom: 1.33vw;border-bottom: 1px solid #E5E5E5;}
    .people_name {font-size: 1.4rem;color: #888;float:left;}
    .people_information {font-size: 1.4rem;color: #888;padding-bottom: 2vw;}
    .people_information p {line-height: 7vw;text-align: left;}
    .people_information span {float:right;color: #666;}
    .detail-main {background: #fff;padding: 0 4vw 4vw 4vw;margin-bottom: 8vw;}
    .detail-main_01 {height:16vw;line-height: 16vw;text-align: right;font-size: 2.4rem;color: #000;border-bottom: 1px solid #e5e5e5;margin-bottom: 3vw;}
    .detail-main_01 span {float:left;text-align: left;font-size: 1.6rem;color: #888;}
    .detail-main_02 p {text-align: left;color: #888;font-size: 1.4rem;line-height: 8vw;}
    .detail-main_02 p span {float:right;text-align: left;font-size: 1.4rem;color: #666;}
    .cancel {width:92vw;height:11.74vw;text-align: center;line-height: 11.74vw;background: #F76260;color: #fff;font-size: 1.8rem;border-radius: 2.5vw;margin:0  auto 20vw;display: inherit;}
    .tab-sort-detail .actives {font-size: 1.1rem;color: #333;}
    .tab-sort-bottom .actives img {
        width:4.27vw;
        height:4.27vw;
        background: #FCC44B;
        border-radius: 2px;
        color: #fff;
    }
     .cancels {font-size: 1.1rem;color: #999;}
     .cancels img {
        width:4.27vw;
        height:4.27vw;
        background: #E5E5E5;
        border-radius: 2px;
        color: #fff;
    }
    .mint-msgbox {width:78.4vw;height:40.8vw;}
    .mint-msgbox-btns {height:13.9vw;}
    .mint-msgbox-title {font-size: 1.8rem;}
    .mint-msgbox-message {font-size: 1.5rem;}
    .mint-msgbox-content {padding: 10px 0 15px 0;}
    .mint-msgbox-btn {font-size: 1.6rem;}
</style>
{/block}

{block name="body"}
<!-- -1 删除   0.禁用   1 预报名中 2启动.-->
<div id="app">
    <div class="tab-sort-num">
        <img :src="baseInfo.front_cover" alt="" class="tab-sort-Img">
        <div class="tab-sort-detail">
            <div class="tab-sort-title">{{baseInfo.names}}</div>
            <div class="tab-sort-time">赛事时间：{{baseInfo.start_time}} - {{baseInfo.end_time}}</div>
            <div class="tab-sort-day"><span>热门活动 </span><span>{{baseInfo.reminder}}</span></div>
            <div class="tab-sort-money">¥{{(baseInfo.money/100).toFixed(2)}}</div>
        </div>
        <div class="tab-sort-bottom">
            <div class="actives" v-if="state(baseInfo.status) == 'true'"><img src="/index/images/icon_bao.png" alt=""> 已报名参加该活动</div>
            <div class="cancels" v-if="state(baseInfo.status) == 'false'"><img src="/index/images/icon_xiao.png" alt=""> 已取消参加该活动</div>
            <!--<div class="cancel"><span>消</span> 已取消参加该活动</div>-->
        </div>
    </div>
    <div class="detail-people">
        <div class="people_sort" v-for="(item,index) in list">
            <div class="people_information">
                <p style="font-size: 1.6rem;">出行人{{index+1}}<span style="color: #333;">{{item.name}}</span></p>
                <p>联系电话<span>{{item.mobile}}</span></p>
                <p>身份证号码<span>{{item.people_card}}</span></p>
                <p>紧急联系电话<span>{{item.emergency_contact}}</span></p>
            </div>
        </div>
        <div class="people_user">
            <!--<div class="people_name">联系人</div>-->
            <div class="people_information">
                <p style="font-size: 1.6rem;">联系人<span style="color: #333;">{{baseInfo.name}}</span></p>
                <p>联系电话<span>{{baseInfo.mobile}}</span></p>
                <p>备注<span>{{baseInfo.remark}}</span></p>
            </div>
        </div>
    </div>
    <div class="detail-main">
        <div class="detail-main_01"><span>付款金额</span>¥{{(baseInfo.money/100).toFixed(2)}}</div>
        <div class="detail-main_02">
            <p v-if="baseInfo.status == '1'">当前状态<span>支付成功</span></p>
            <p v-if="baseInfo.status == '2'" >当前状态<span style="color: #F76260;">退款成功</span></p>
            <p v-if="baseInfo.status == '3'" >当前状态<span style="color: #F76260;">退款中</span></p>
            <p>商户名称<span>毅行达人活动报名费用</span></p>
            <p>商户简称<span>炬火影视</span></p>
            <p v-if="baseInfo.status == '1'">支付时间 <span>{{baseInfo.pay_time}}</span></p>
            <p v-if="baseInfo.status == '2'">退款时间 <span>{{baseInfo.refund_time}}</span></p>
            <!--<p><span>支付方式</span>微信支付</p>-->
            <p>交易单号 <span>{{baseInfo.jylsh}}</span></p>
            <p>商户单号 <span>{{baseInfo.out_trade_no}}</span></p>
        </div>

    </div>
    <mt-button type="primary" class="cancel" @click="toggleModal" v-if="baseInfo.status == '1'">取消报名</mt-button>
    <mt-button type="primary" class="cancel" style="background: #69B9F9;" @click="toggleModal" v-if="baseInfo.status == '2'">再次报名</mt-button>
    <mt-button type="primary" class="cancel" style="display: none;" v-if="baseInfo.status == '3'" >退款中</mt-button>
    <!--<div class="cancel" @click="toggleModal">取消报名</div>-->
</div>
{/block}

{block name="script"}
<script>

    var app = new Vue({
        el: '#app',
        data: {
            selected:"selected1",
            baseInfo:{$info},
            list:[],
            subData:{
                id:'',
                typeid:''
            },
            modal:{
                isShow:false
            },
            typeVisible:false,
            typeSlots:[
                {
                    defaultIndex:1,
                    values:1
                }
            ],

        },
        created(){
            baseInfo=this.baseInfo;
            for(var i=0;i<baseInfo.trip.length;i++){
                this.list.push(baseInfo.trip[i]);
            }
            console.log(this.baseInfo)
        },
        methods: {
            toggleModal(){
                if(this.baseInfo.status==2){
                    window.location.href="/index/activity/detail/id/"+baseInfo.activity_id;
                    return;
                }
                var _this = this;
                var subData = {
                    out_trade_no:_this.baseInfo.out_trade_no,
                    money:_this.baseInfo.money/100,
                    jylsh: _this.baseInfo.jylsh
                    };
                var url = "{:Url('/index/activity/refund')}"
                _this.$messagebox.confirm('取消后，报名费用将会退还至您的账户','确定取消报名吗？').then(
                    action => {
                    _this.$http.post(url,subData).then(function (res) {
                    var data  = res.data;
                    if (data.code == 1) {
                        swal({
                            title: '',
                            text: '取消报名成功！',
                            type:'success',
                            confirmButtonColor: "#69B9F9",
                            confirmButtonText: "确定"
                        },function(){
//                            window.location.reload();
                            self.location=document.referrer;
                        });
                    } else {
                        swal({
                            title: '',
                            text: '取消报名失败，请稍微再试！',
                            type:'error',
                            confirmButtonColor: "#69B9F9",
                            confirmButtonText: "确定"
                        });
                    }

                })
                },
                action => {
                    console.log(2)
                }
            );
            },
            state(status){
                if(status == 1){
                    return 'true'
                }else if(status ==2){
                    return 'false'
                }else if(status ==3){
                    return 'false'
                }
            },
            jumpToUser(){
                window.location.href = '/index/user/index'
            }
        }
    })
</script>
{/block}